<script>
import Product from "../../components/product.vue";
import { getPro } from "../../api/productserver";
import { mapGetters, mapActions, mapMutations } from "vuex";
import { list } from "_postcss@8.4.18@postcss";
export default {
  props: ["id"],
  components: {
    product: Product,
  },
  data() {
    return {
      data: [],
      value: "",
      total: 0,
      loading: false,
      finished: false,
      page: 1,
      refreshing: false,
    };
  },
  watch: {
    $route(route) {
      if (route.name == "list") {
        this.page = 1; //当切换到全部商品时要重置page和finshed要不会有bug
        this.finished = false;
        this.findShopp("");
      }
    },
  },
  computed: {
    ...mapGetters("global", ["getTypeData"]),
    gettitle() {
      //获取分类页标题
      for (var i = 0; i < this.getTypeData.length; i++) {
        if (!this.id) {
          return "全部商品";
        }
        if (this.id == this.getTypeData[i].id) {
          return this.getTypeData[i].title;
        }
      }
    },
  },
  mounted() {
    this.getProData();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //右边全部按钮
    onClickRight() {
      this.$router.replace("/list");
    },
    findShopp(typeid) {
      getPro(
        { page: 1, orderbytype: "id", typeid: typeid, key: this.value },
        (res) => {
          this.data = res.data[0].data;
          this.total = res.data[1].data[0].count;
          this.data = res.data[0].data;
          this.refreshing = false;
          this.finished = false;
          this.loading = false;
        }
      );
    },
    getProData() {
      this.page = 1; //当切换到全部商品时要重置page和finshed要不会有bug
      // this.finished = false;
      this.findShopp(this.id);
    },
    onLoad() {
      let pageAll = Math.ceil(this.total / 10);
      if (this.page < pageAll) {
        this.page++;
        console.log(this.page);
        getPro(
          {
            page: this.page,
            orderbytype: "id",
            typeid: this.id,
            key: this.value,
          },
          (res) => {
            //加载数据需要在原来的数据后面追加数据
            this.loading = false;
            this.data = [...this.data, ...res.data[0].data];
            console.log(this.data);
          }
        );
      } else {
        this.finished = true; //没有分页数据,则不需要触发onload事件
      }

      // this.finished = true;
      // this.onload = true;
    }, //触发事件
    onRefresh() {
      this.refreshing = true;
      this.page = 1;
      this.findShopp(this.id);
    },
  },

  // store,
};
</script>
<template>
  <van-nav-bar
    :title="gettitle"
    left-text="返回"
    right-text="全部"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
    placeholder
    fixed
  />
  <van-search
    v-model="value"
    placeholder="请输入搜索关键词"
    shape="round"
    @search="getProData"
  /><van-list
    :immediate-check="false"
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <product :dataList="data" /> </van-pull-refresh
  ></van-list>
</template>
<style lang="scss"></style>
